* { margin:0; padding:0; box-sizing:border-box;}
.header_area { display:block; width:100%; height:50px; line-height:50px; padding-left:20px; border-bottom:1px solid #ddd; }
.header_area h2 { font-size:20px;}

.body_area  { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex-direction:row;  width:100%; height:calc(100vh - 50px);  }
.body_area button { display:block; padding:10px; border:1px solid #ddd; background:#fff; cursor:pointer; }

.modal_dimm { position:fixed; left:0; top:0; z-index:1; display:block; width:100%; height:100vh; background:rgba(0, 0,0,0.5);; }
.modal_dimm .modal { position:absolute; left:50%; top:50%; z-index:2; width:500px; height:300px; transform:translate(-50%,-50%); background:#fff; border-radius:30px; }
.modal_dimm .modal .tit { position:relative; display:block; width:100%; height:60px; line-height:70px; border-bottom:1px solid #ececec; padding:0 30px 0 30px; box-sizing:border-box; font-weight:bold; font-size:20px;} 
.modal_dimm .modal .tit .btn { position:absolute; right:30px; top:19px; width:30px; height:30px; border:0px dotted #000; transform:rotate(45deg); cursor:pointer;}
.modal_dimm .modal .tit .btn:before { content:""; position: absolute; left:0%; top:15px; width:30px; height:1px; background:rgba(0, 0,0,1);  }
.modal_dimm .modal .tit .btn:after { content:""; position: absolute; left:50%; top:0px; width:1px; height:30px; background:rgba(0, 0,0,1);  }
.modal_dimm .modal .bdy {  padding:20px 30px; }
.footer_area { display:block; text-align:center; height:80px; line-height:80px; background:#000; color:#ddd; }

import React, {useState} from 'react';
import Modal from './Modal';
import './App_new.css';
    function App()
    {   
        return(
            <div>
                <div className="header_area">
                    <h2>Open Popup</h2>
                </div>
                <div className="body_area">
                    <Modal></Modal>
                </div>
                <div className="footer_area">
                    Footer area 20220907 relation.co.kr 
                </div>
            </div>
        );
    }


export default App;

import React, { useState}  from 'react';

    function Modal()
    {
        let [modal, setModal] = useState('false');
        function ChangeModal()
        {
            if(modal == true)
            {
                setModal(false);
                document.body.style.overflow = "visible";
            }
            else
            {
                setModal(true);
                document.body.style.overflow = "hidden";
            }
        }

        function Modal_layout()
        {
           return(
            <div className="modal_dimm">
                <div className="modal">
                    <div className="tit">
                        Modal Title
                        <div className="btn" onClick={()=>{
                            ChangeModal();
                        }}></div>
                     </div>
                    <div className="bdy">Modal Body</div>
                </div>
            </div>
           )     
        }
        
        
        return(
            <>
            <button type="button" id="popupDom" onClick={ function(){
                ChangeModal();
            } }>Open-Modal</button>
             {
                    modal === true ? <Modal_layout/> :null
            }
            </>
        );
    }

ex